<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #resultContainer {
            border: 1px solid;
            font-size: 18px;
            background: #eee;
            padding: 20px;
            margin: 10px auto;
            font-family: cursive;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Hello</h1>
        <button type="button" class="btn btn-success" onclick="socketioConnect()">
            <span class="glyphicon glyphicon-lock"></span> 系统登录
        </button>
        <button type="button" class="btn btn-primary" onclick="startPushStream()">
            <span class="glyphicon glyphicon-play"></span> 开始推流
        </button>
        <button type="button" class="btn btn-danger" onclick="stopPushStream()">
            <span class="glyphicon glyphicon-stop"></span> 停止推流
        </button>
        <div id="resultContainer"></div>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/socket.io/1.4.8/socket.io.min.js"></script>
    <script>
        var socket = io('http://127.0.0.1:3000');
        var socketioConnect = function() {
            var deviceId = 'ue38d-23d72-sxe23';
            var userData = {
                'pid': deviceId,
                'pname': '1#编码器',
                'type': 'andirod-box'
            };
            socket.emit('userSignin', userData);
        };
        socket.on('userSigninSuccess', function(data) {
            $("#resultContainer").append(JSON.stringify(data));
        });

        var startPushStream = function() {
            var data = {
                "stream": "rtmp://127.0.0.1:10087/encoder/iemaker2016"
            };
            socket.emit('startPushStream', data);
        };
        socket.on("startPushStreamResult", function(data) {
            $("#resultContainer").append(JSON.stringify(data) + "<br />");
        });

        var stopPushStream = function() {
            socket.emit('stopPushStream');
        };
        socket.on("stopPushStreamResult", function(data) {
            $("#resultContainer").append('stop push stream success.<br />');
        });
    </script>
</body>

</html>